$(function () {
    // ***********************加载用户列表
    var layer = layui.layer
    var form = layui.form

    function user_list() {
        $.ajax({
            url: '/admin/users',
            data: {
                pagenum: 1,
                pagesize: 10
            },
            success: function (res) {
                let str = ``
                $.each(res.data, function (index, item) {
                    console.log(item);
                    str += `<tr>
                    <td>${item.id}</td>
                    <td>${item.username}</td>
                    <td>${item.nickname}</td>
                    <td>${item.email}</td>
                    <td>
                      <button type="button" class="layui-btn layui-btn-xs ">
                        <a style="color: #fff" target="iframeArea" href="./edit.html?${item.id}">编辑</a>
                      </button>
                      <button _id=${item.id} type="button" class="layui-btn layui-btn-xs layui-btn-danger delete">删除</button>
                      <button _id=${item.id} type="button" class="layui-btn layui-btn-xs layui-btn-normal rePwd">重置密码</button>
                    </td>
                  </tr>`
                })
                $('tbody').html(str)
            }
        })
    }
    user_list()



    // ************************删除用户
    $('tbody').on('click', '.delete', function () {
        let id = $(this).attr('_id')
        $.ajax({
            type: 'DELETE',
            url: `/admin/users/${id}`,
            success: function (res) {
                layer.msg(res.message)
                user_list()
            }
        })
    })



    // ***********************重置密码的form表单

    let str = `<form id="repwd-form" class="layui-form pasword" style="margin: 15px 30px 0 0" lay-filter="pwd" >
      <!-- 第一行：密码 -->
      <div class="layui-form-item">
        <label class="layui-form-label">密码</label>
        <div class="layui-input-block">
          <input type="text" name="password" required lay-verify="required" placeholder="请输入新密码" autocomplete="off" class="layui-input pwd1">
        </div>
      </div>
      <!-- 第二行：确认密码 -->
      <div class="layui-form-item">
        <label class="layui-form-label">确认密码</label>
        <div class="layui-input-block">
          <input type="text" required lay-verify="required|password" placeholder="请重复输入新密码" autocomplete="off" class="layui-input pwd2">
        </div>
      </div>
      <!-- 第三行：按钮 -->
      <div class="layui-form-item">
        <div class="layui-input-block">
          <button class="layui-btn submit" lay-submit lay-filter="formDemo">提交</button>
          <button type="reset" class="layui-btn layui-btn-primary">重置</button>
        </div>
      </div>
    </form>`;
    $('tbody').on('click', '.rePwd', function () {
        let id = $(this).attr('_id')
        var index = layer.open({
            type: 1,
            content: str
        });
        let pwd = form.val("pwd")
        console.log(pwd);
        form.verify({
            password: function (value, item) {
                let pwd1 = $('.pwd1').val()
                if (value !== pwd1) {
                    return '确认密码错误'
                }
            }
        });

        $('.pasword').on('submit', function (e) {
            e.preventDefault()
            /* let pwd1 = $('.pwd1').val()
            let pwd2 = $('.pwd2').val()
            if (pwd1 != pwd2) {
                layer.msg('确认密码错误')
                return false
            } */

            $.ajax({
                type: 'PUT',
                url: `/admin/users/${id}`,
                data: {
                    password: pwd
                },
                success: function (res) {
                    layer.msg(res.message)
                }
            })
        })
    })

})